<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function drawTop(ctx, fillStyle){ 
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0, 0, 30, 0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
} 
function drawGrip(ctx){ 
    ctx.save(); 
    ctx.fillStyle = "blue";
    ctx.fillRect(-1.5, 0, 1.5, 40);
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(-5, 40, 4, Math.PI,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore(); 
} 

</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
// 注意：所有的移动都是基于这一上下文。
ctx.translate(80,80);
for (var i=1;i<10;i++){
	ctx.save();
	ctx.translate(60*i, 0);
	drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
	drawGrip(ctx);
	ctx.restore();
}

</script>
</body>
</html>  
